<template>
  <div class="pageWrapper">
    <common-header :title="title" />
    <div class="wrapper">
      <div class="list-item card">
        <user-avater :avater="appraisalUser.avater" :userName="appraisalUser.userName" />
        <div class="item-content">
          <div class="name">{{ appraisalUser.userName }}</div>
          <div class="copy">考核单位：{{ appraisalData.deptNameTree }}</div>
          <div class="copy">隶属单位：{{ appraisalUser.orgName }}</div>
        </div>
        <div class="label">
          {{ appraisalData.year }}年<span v-if="$route.query.is_year == '0'">第{{ appraisalData.quarter }}季度</span>
        </div>
      </div>
      <div class="card" @click="showPopup = true" v-if="$route.query.type == 1">
        <div class="label-wrap">
          <div class="name">标签</div>
          <div class="flex">
            <div class="label" v-if="label.id">{{ label.tableName }}</div>
            <img src="@/assets/common/arrow-right-blue.png" />
          </div>
        </div>
      </div>
      <div class="card">
        <div class="card-row">
          <p class="card-title">{{ $route.query.type == 1 ? "建议等次" : "评定等次" }}</p>
        </div>
        <div class="card-pane">
          <van-radio-group v-model="submitForm.score" icon-size="18" direction="horizontal">
            <van-radio v-for="(item, index) in levelList" :disabled="item == 'A' && overSize" :key="index"
              @click="onRedio(item == 'A' && overSize)" :name="item">{{ levelStatus[item] }}</van-radio>
          </van-radio-group>
        </div>
      </div>
      <div class="card" v-if="showComment">
        <div class="card-row">
          <p class="card-title">评语</p>
        </div>
        <textarea id="content" @click="onTextArea" v-model="submitForm.comment" class="textarea"
          placeholder="请输入评语"></textarea>
      </div>
      <div class="block"></div>
      <div class="submit-btn btn-active" @click="submit">提交</div>
    </div>
    <label-popup @success="labelSelected" :showPopup.sync="showPopup" />
  </div>
</template>

<script>
import labelPopup from "./components/label-popup.vue";
import { getAppraisalLevel, checkGoodOption, saveEvaluation, getYearAppraisalLevel, saveYearEvaluation, checkYearGoodOption } from "@/api/appraisalProcess";
import { getDictionaryByType } from "@/api/common";
import { Dialog, Toast } from "vant";
export default {
  data() {
    return {
      data: {},
      showPopup: false,
      label: {},
      userId: "",
      depInfo: {},
      submitForm: {
        id: "",
        evaluationType: "",
        score: "",
        tableId: "",
        comment: ""
      },
      levelList: [],
      levelStatus: {},
      appraisalUser: {},
      appraisalData: {},
      overSize: false,
      title: ""
    };
  },
  created() {
    this.title = this.$route.query.type == 1 ? "建议等次" : "评定等次";
    this.depInfo = JSON.parse(sessionStorage.getItem("appraisalData"));
    this.userId = this.$route.query.uid;
    this.submitForm.id = this.$route.query.id;
    this.submitForm.evaluationType = this.$route.query.type == 1 ? "adviseLevel" : "judgeLevel";
    this.appraisalUser = JSON.parse(sessionStorage.getItem("appraisalUser"));
    this.appraisalData = JSON.parse(sessionStorage.getItem("appraisalData"));
    this.initLevel();
    this.checkBeforeSubmit();
  },
  components: {
    labelPopup
  },
  computed: {
    showComment() {
      let query = this.$route.query;
      return (query.type == "2" && query.is_year == "0") || (query.is_year == "1" && query.type == "1");
    }
  },
  methods: {
    onTextArea() {
      this.$nextTick(() => {
        document.querySelector('#content').focus();
      })
    },
    labelSelected(item) {
      this.label = item;
      this.submitForm.tableId = item.id;
    },
    initLevel() {
      let form = {
        userId: this.userId,
        year: this.depInfo.year
      };
      let type = "yearAssess";
      let getLevelFn = getYearAppraisalLevel;

      if (this.$route.query.is_year == "0") {
        form.quarter = this.depInfo.quarter;
        getLevelFn = getAppraisalLevel;
        type = "quarterAssess";
      }
      getLevelFn(form).then(res => {
        if (res.code == 200) {
          this.levelList = res.data;
          this.getLevelDirc(type);
        } else {
          setTimeout(() => {
            Dialog.alert({
              title: "提示",
              message: res.msg,
              confirmButtonText: "返回"
            }).then(() => {
              this.$router.back();
            });
          }, 500);
        }
      });
    },
    getLevelDirc(type) {
      this.levelStatus = {};
      getDictionaryByType(type).then(res => {
        res.data.forEach(ele => {
          this.$set(this.levelStatus, ele.dictValue, ele.dictLabel);
        });
      });
    },

    checkBeforeSubmit() {
      if (this.$route.query.is_year == "1") {
        let form = {
          assessYear: this.appraisalData.year,
          deptId: this.appraisalData.deptId
        };
        checkYearGoodOption(form).then(res => {
          if (res.code == 200) {
            this.overSize = false;
          } else {
            this.overSize = true;
          }
        });
      } else {
        let form = {
          deptId: this.appraisalData.deptId,
          year: this.depInfo.year,
          quarter: this.depInfo.quarter
        };
        checkGoodOption(form).then(res => {
          if (res.data) {
            this.overSize = false;
          } else {
            this.overSize = true;
          }
        });
      }
    },
    onRedio(flag) {
      if (flag && this.submitForm.score != "A") {
        if (this.$route.query.is_year == "0") {
          Dialog.confirm({
            title: `${this.$route.query.type == 1 ? "建议" : "评定"}等次确认`,
            message: `${this.$route.query.type == 1 ? "建议" : "评定"}等次优秀比例已超过40%，是否确定`
          })
            .then(() => {
              this.submitForm.score = "A";
            })
            .catch(() => { });
        } else {
          Dialog({
            title: "提示",
            message: "优秀指标数量不足，无法选择优秀。"
          }).then(() => { });
        }
      }
    },
    submit() {
      if (!this.submitForm.score) {
        Toast("请选择评定等次");
        return;
      }
      if (this.showComment && ["A", "B"].indexOf(this.submitForm.score) == -1 && !this.submitForm.comment) {
        Toast("请输入评语");
        return;
      }
      let submitFn = this.$route.query.is_year == "1" ? saveYearEvaluation : saveEvaluation;
      submitFn(this.submitForm).then(res => {
        if (res.code == 200) {
          Toast("提交成功");
          this.$router.back();
        } else {
          Toast(res.msg);
        }
      });
    }
  }
};
</script>

<style scoped lang="scss">
.wrapper {
  padding: 16px 16px 0;
}

.label-wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  line-height: 26px;

  .name {
    font-size: 16px;
    color: #000;
  }

  .label {
    background: rgba(56, 127, 241, 0.1);
    color: #2492ff;
    font-size: 12px;
    padding: 0 8px;
    border-radius: 4px;
    white-space: nowrap;
  }

  img {
    height: 12px;
    margin-left: 10px;
  }

  .flex {
    align-items: center;
  }
}

.textarea {
  border: none;
  width: 100%;
  padding: 0;
  resize: none;
  font-size: 14px;
  line-height: 20px;
  height: 48px;

  ::placeholder {
    color: #b2b2b2;
  }
}

.card {
  background: #fff;
  border-radius: 8px;
  margin-bottom: 12px;
  padding: 16px 20px;
  line-height: 23px;

  .card-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;

    .card-title {
      font-size: 16px;
      color: #000;
    }
  }

  .card-pane {
    ::v-deep .van-radio {
      margin-top: 12px;
      margin-right: 20px;
    }
  }
}

.submit-btn {
  position: fixed;
  left: 16px;
  bottom: 54px;
  width: 343px;
  text-align: center;
  line-height: 52px;
  border-radius: 12px;
  color: #fff;
  background: #2492ff;
  font-size: 14px;
}

.block {
  height: 130px;
}

.list-item {
  display: flex;
  position: relative;

  img {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    margin-right: 12px;
  }

  .label {
    position: absolute;
    top: 15px;
    right: 15px;
    font-size: 12px;
    color: #606266;
  }

  .item-content {
    flex: 1;

    .name {
      font-size: 14px;
      color: #333;
      line-height: 20px;
    }

    .copy {
      margin-top: 5px;
      color: #a3a7ad;
      font-size: 12px;
      line-height: 18px;
    }
  }

  .btn {
    padding: 0 6px;
    white-space: nowrap;
    line-height: 24px;
    border-radius: 4px;
    color: #fff;
    text-align: center;
    margin-left: 12px;
    font-size: 10px;
    background: #2492ff;
  }

  .score {
    margin-bottom: 14px;

    .num {
      text-align: right;
      font-size: 16px;
      font-weight: 600;
      color: #f60e36;
    }

    .text {
      margin-top: 4px;
      color: rgba(36, 46, 69, 0.3);
      font-size: 12px;
    }
  }
}

::v-deep .van-radio__icon--disabled.van-radio__icon--checked .van-icon {
  color: #fff;
  background-color: #1989fa;
  border-color: #1989fa;
}

::v-deep .van-radio__label--disabled {
  color: #323233;
}

::v-deep .van-radio__icon--disabled .van-icon {
  background-color: #fff;
}
</style>
